<template>
	<view class="box">
		<view class="information">
			<view class="change" @click="change">
				<uni-icons type="compose" size="30" color="#fff"></uni-icons><text>编辑</text>
			</view>
			<view class="olddata">
				<view class="avatar">
					<image src="../../static/05.jpg" mode="widthFix"></image>
				</view>
				<view class="">
					<view class="">
						{{data[0].username}}
					</view>
					<view class="">
						手机号：{{data[0].phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="function">
			<view class="funimg" @click="Serendipity">
				<image src='../../static/团购订单.png' mode=""></image>
				<text>名宿订单</text>
			</view>
			<view class="funimg" @click="shop">
				<image src='../../static/购物车.png' mode=""></image>
				<text>购物订单</text>
			</view>
			<view class="funimg">
				<image src='../../static/活动.png' mode=""></image>
				<text>活动报名</text>
			</view>
			<view class="funimg" @click="set">
				<image src='../../static/设置.png' mode=""></image>
				<text>设置</text>
			</view>
			<view class="funimg">
				<image src='../../static/客户服务.png' mode=""></image>
				<text>客户服务</text>
			</view>
			<view class="funimg" @click="address">
				<image src='../../static/收货地址.png' mode=""></image>
				<text>收货地址</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

	let data=ref(JSON.parse(localStorage.getItem('data')))
	let address = () => {
		uni.navigateTo({
			url:'/pages/address/address'
		})
	}
	let shop=()=>{
		uni.navigateTo({
			url:'/pages/shopping/shopping'
		})
	}
	let set = () => {
		uni.navigateTo({
			url:'/pages/set/set'
		})
	}
	let Serendipity=()=>{
		uni.navigateTo({
			url:'/pages/Serendipity/Serendipity'
		})
	}
	let change = () => {
		uni.navigateTo({
			url: '/pages/information/information'
		})
	}
</script>

<style scoped lang="scss">
	.box {
		width: 750rpx;
		height: calc(100vh - 189rpx);
		background-color: #F2F2F2;

		.function {
			display: flex;
			flex-wrap: wrap;
			width: 95%;
			gap: 30rpx;
			height: 550rpx;
			background-color: #fff;
			margin: auto;
			border-radius: 10rpx;
			padding-top: 50rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			padding-bottom: 30rpx;
			box-sizing: border-box;

			.funimg {
				width: 150rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 40rpx;
				gap: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

			}
		}
	}

	.information {
		width: 95%;
		border-radius: 10rpx;
		margin: auto;
		height: 270rpx;
		background-color: #3399FF;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;

		.olddata {
			margin-top: 60rpx;
			width: 470rpx;
			height: 125rpx;
			display: flex;
			line-height: 30px;
			align-items: center;
			color: #fff;
			justify-content: space-between;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 50%;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
		}

		.change {
			float: right;
			text-align: right;
			display: flex;
			align-items: center;
			color: #fff;
		}

	}
</style>